{include file="$header"}
<div id="app" v-cloak>
    <div class="el-warp">
        <div class="el-user">
            <el-card class="box-card content" style="width: 100%">
                <div slot="header" class="clearfix">
                    <span>TA的资料</span> 
                </div>
                <div class="page">
                    <div class="header">
                        <el-avatar style="float: left;" :size="145" src="{$pageUserInfo.cover}">{:substr($pageUserInfo.nickname,0,1)}</el-avatar>
                        <div class="info">
                            <div class="nickname">
                                {$pageUserInfo.nickname}
                                <el-button 
                                    :type="pageUserInfo.is_follow === 0 ? 'danger' : ''" 
                                    size="mini" 
                                    @click="follow(pageUserInfo)">
                                    {{pageUserInfo.is_follow === 0 ? lang('follow') : lang('paid attention to')}}
                                </el-button>
                            </div>
                            <div class="describe">{$pageUserInfo.describe}</div>
                            <div class="labels">
                                <div class="item">
                                    <span class="label">Lv</span>
                                    <span class="value">{$pageUserInfo.group_title}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {if $pageUserInfo.hide == 1}
                    <el-tabs v-model="tabs" class="tabs" type="card">
                        <el-tab-pane :label="lang('ta follow') + '（' + pageUserInfo.follow_count + '）'" name="follow">
                            <div v-if="tabs === 'follow'" class="tab" v-infinite-scroll="followList" :infinite-scroll-disabled="followDisabled">
                                <div class="item" v-for="item in followData">
                                    <a :href="item.to.url" target="_blank">
                                        <img :src="item.to.cover">
                                        <div class="details">
                                            <div class="title">{{item.to.nickname}}</div>
                                            <div class="describe">{{item.to.describe}}</div>
                                        </div>
                                    </a>
                                    <div class="follow">
                                        <el-button :type="item.to.is_follow === 0 ? 'danger': '' " size="mini" @click="follow(item.to)">
                                            {{item.to.is_follow === 0 ? lang('follow') : lang('paid attention to')}}
                                        </el-button>
                                    </div>
                                </div>
                                <div v-if="followLoading" class="el-loader">{:lang('loading')}</div>
                                <div v-if="followNoMore && followLoading === false" class="el-nomore">{:lang('no more')}</div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane :label="lang('ta fans') + '（' + pageUserInfo.fans_count + '）'" name="fans">
                            <div v-if="tabs === 'fans'" class="tab" v-infinite-scroll="fansList" :infinite-scroll-disabled="fansDisabled">
                                <div class="item" v-for="item in fansData">
                                    <a :href="item.user.url" target="_blank">
                                        <img :src="item.user.cover">
                                        <div class="details">
                                            <div class="title">{{item.user.nickname}}</div>
                                            <div class="describe">{{item.user.describe}}</div>
                                        </div>
                                    </a>
                                    <div class="follow">
                                        <el-button v-if="item.user.is_follow != null" :type="item.user.is_follow === 0 ? 'danger' : ''" size="mini" @click="follow(item.user)">
                                            {{item.user.is_follow === 0 ? lang('follow') : lang('paid attention to')}}
                                        </el-button>
                                    </div>
                                </div>
                                <div v-if="fansLoading" class="el-loader">{:lang('loading')}</div>
                                <div v-if="fansNoMore && fansLoading === false" class="el-nomore">{:lang('no more')}</div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane :label="lang('ta message') + '（' + pageUserInfo.message_count + '）'" name="message">
                           <el-form >
                                <el-input type="textarea" v-model="messageContent" :placeholder="lang('please enter')"></el-input>
                                <el-button type="primary" @click="message(pageUserInfo)" size="mini" style="margin-top: 10px">{{lang('message')}}
                                </el-button>
                            </el-form>
                            <div 
                                v-if="tabs === 'message'" 
                                class="tab" 
                                v-infinite-scroll="messageList" 
                                :infinite-scroll-disabled="messageDisabled">
                                <div class="item" v-for="item in messageData">
                                    <a :href="item.user.url" target="_blank">
                                        <img :src="item.user.cover">
                                        <div class="details">
                                            <div class="title">{{item.user.nickname}}</div>
                                            <div class="describe">{{item.explain}}</div>
                                        </div>
                                    </a>
                                    <div class="follow">
                                        <el-button v-if="item.user.is_follow != null" :type="item.user.is_follow === 0 ? 'danger' : ''" size="mini" @click="follow(item.user)">
                                            {{item.user.is_follow === 0 ? lang('follow') : lang('paid attention to')}}
                                        </el-button>
                                    </div>
                                </div>
                                <div v-if="messageLoading" class="el-loader">{:lang('loading')}</div>
                                <div v-if="messageNoMore && messageLoading === false" class="el-nomore">{:lang('no more')}</div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="{:lang('recent visitors')}" name="visitors">
                            <div 
                                v-if="tabs === 'visitors'" 
                                class="tab" 
                                v-infinite-scroll="visitorList" 
                                :infinite-scroll-disabled="visitorDisabled">
                                <div class="item" v-for="item in visitorData">
                                    <a :href="item.user.url" target="_blank">
                                        <img :src="item.user.cover">
                                        <div class="details">
                                            <div class="title">{{item.user.nickname}}</div>
                                            <div class="describe">{{item.user.describe}}</div>
                                        </div>
                                    </a>
                                    <div class="follow">
                                        <el-button v-if="item.user.is_follow != null" :type="item.user.is_follow === 0 ? 'danger' : ''" size="mini" @click="follow(item.user)">
                                            {{item.user.is_follow === 0 ? lang('follow') : lang('paid attention to')}}
                                        </el-button>
                                        <div class="time">{{common.diaplayTime(item.create_time)}}</div>
                                    </div>
                                </div>
                                <div v-if="visitorLoading" class="el-loader">{:lang('loading')}</div>
                                <div v-if="visitorNoMore && visitorLoading === false" class="el-nomore">{:lang('no more')}</div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                    {else/}
                    <el-empty description="TA设置了隐私"></el-empty>
                    {/if}
                </div>
            </el-card>
        </div>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                messageContent: "",
                pageUserInfo: {:json_encode($pageUserInfo)},
                tabs: 'follow',
                visitorData: [],
                visitorSearch:{
                    id: locationUrl.get('id'),
                    page: 1,
                },
                visitorLoading: false,
                fansData: [],
                fansSearch:{
                    id: locationUrl.get('id'),
                    type: 'fans',
                    page: 1,
                },
                fansLoading: false,
                followData: [],
                followSearch:{
                    id: locationUrl.get('id'),
                    type: 'follow',
                    page: 1,
                },
                followLoading: false,
                messageData: [],
                messageSearch:{
                    id: locationUrl.get('id'),
                    page: 1,
                },
                messageLoading: false,
                blogData: [],
                blogSearch:{
                    id: locationUrl.get('id'),
                    page: 1,
                },
                blogLoading: false,
            }
        },
        computed: {
            userInfo() {
                if (userInfo == null) {
                    userInfo = {};
                    userInfo.cover = '';
                    userInfo.nickname = '';
                    userInfo.describe = '';
                }
                return userInfo;
            },
            visitorNoMore() {
                return this.visitorCount <= this.visitorData.length;
            },
            visitorDisabled() {
                return this.visitorLoading || this.visitorNoMore;
            },
            fansNoMore() {
                return this.fansCount <= this.fansData.length;
            },
            fansDisabled() {
                return this.fansLoading || this.fansNoMore;
            },
            followNoMore() {
                return this.followCount <= this.followData.length;
            },
            followDisabled() {
                return this.followLoading || this.followNoMore;
            },
            messageNoMore() {
                return this.messageCount <= this.messageData.length;
            },
            messageDisabled() {
                return this.messageLoading || this.messageNoMore;
            },
            blogNoMore() {
                return this.blogCount <= this.blogData.length;
            },
            blogDisabled() {
                return this.blogLoading || this.blogNoMore;
            },
        },
        methods: {
            message(item) {
                let self = this;
                if (self.messageContent != '') {
                    request.post('user/message', {id: item.id, content: self.messageContent}, function (res) {
                        if (res.status === 'success') {
                            self.messageData.unshift({
                                create_time: common.dateTime(),
                                explain: self.messageContent,
                                user: {
                                    cover: self.userInfo.cover, 
                                    nickname: self.userInfo.nickname,
                                    describe: self.userInfo.describe,
                                    is_follow: 0
                                },
                            });
                            self.messageContent = "";
                        } else {
                            self.$message({ showClose: true, message: res.message, type: res.status});
                        }
                    })
                }
            },
            /**
             * 关注
             */
            follow(item) {
                let self = this;
                request.post('user/follow', {id: item.id}, function (res) {
                    if (res.status === 'success') {
                        item.is_follow = item.is_follow === 0 ? 1 : 0;
                    } else {
                        self.$message({ showClose: true, message: res.message, type: res.status});
                    }
                })
            },
            /**
             * 加载列表
             */
            visitorList() {
                let self = this;
                self.visitorLoading = true;
                request.post('visitorPage', self.visitorSearch, function (res) {
                    if (res.status === 'success') {
                        self.visitorSearch.page++;
                        self.visitorData  = self.visitorData.concat(res.data);
                        self.visitorCount = res.count;
                    }
                    self.visitorLoading = false;
                })
            },
            /**
             * 搜索
             */
            visitorSearchList() {
                this.visitorSearch.page = 1;
                this.visitorData = [];
                this.visitorList();
            },
            /**
             * 加载列表
             */
            fansList() {
                let self = this;
                self.fansLoading = true;
                request.post('fansPage', self.fansSearch, function (res) {
                    if (res.status === 'success') {
                        self.fansSearch.page++;
                        self.fansData  = self.fansData.concat(res.data);
                        self.fansCount = res.count;
                    }
                    self.fansLoading = false;
                })
            },
            /**
             * 搜索
             */
            fansSearchList() {
                this.fansSearch.page = 1;
                this.fansData = [];
                this.fansList();
            },
            /**
             * 加载列表
             */
            followList() {
                let self = this;
                self.followLoading = true;
                request.post('fansPage', self.followSearch, function (res) {
                    if (res.status === 'success') {
                        self.followSearch.page++;
                        self.followData  = self.followData.concat(res.data);
                        self.followCount = res.count;
                    }
                    self.followLoading = false;
                })
            },
            /**
             * 搜索
             */
            followSearchList() {
                this.followSearch.page = 1;
                this.followData = [];
                this.followList();
            },
            /**
             * 加载列表
             */
            messageList() {
                let self = this;
                self.messageLoading = true;
                request.post('messagePage', self.messageSearch, function (res) {
                    if (res.status === 'success') {
                        self.messageSearch.page++;
                        self.messageData  = self.messageData.concat(res.data);
                        self.messageCount = res.count;
                    }
                    self.messageLoading = false;
                })
            },
            /**
             * 搜索
             */
            messageSearchList() {
                this.messageSearch.page = 1;
                this.messageData = [];
                this.messageList();
            },
            /**
             * 加载列表
             */
            blogList() {
                let self = this;
                self.blogLoading = true;
                request.post('blog/blog/blogPage', self.blogSearch, function (res) {
                    if (res.status === 'success') {
                        self.blogSearch.page++;
                        self.blogData  = self.blogData.concat(res.data);
                        self.blogCount = res.count;
                    }
                    self.blogLoading = false;
                })
            },
            /**
             * 搜索
             */
            blogSearchList() {
                this.blogSearch.page = 1;
                this.blogData = [];
                this.blogList();
            },
        },
    });
</script>
{include file="$footer"}